<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超炫的散列画廊特效</title>
    <link rel="stylesheet" href="css/styles.css">
    <style>
        .text-class{
            text-align: center;
            color: rebeccapurple;
            font-weight: 600;
            margin-top: 10px;
            font-size: 18px;
        }
    </style>
</head>
<body onselectstart="return false;">
    <div class="text-class">
        <div>点击图片进行反转</div>
        <div>点击按钮随机切换</div>
    </div>
<!--onselectstart="return false;防止字体被复制-->
<div class="wrap" id="wrap">
    <!--.photophoto负责平移和旋转-->
    <div class="photo photo_front" onclick="turn(this)"
    id="photo_{{index}}">
        <!--.photo-wrap 负责翻转-->
        <div class="photo-wrap">
            <!--.side-front 海报正面-->
            <div class="side side-front ">
                <p class="image">
                    <img src="images/{{img}}" alt="测试图片">
                </p>
                <p class="caption">{{caption}}</p>
            </div>
            <!--.side-back 海报反面-->
            <div class="side side-back">
                <p class="desc">{{desc}}</p>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>